<template>
	<view class="body pt40" style="background-image: url(/static/image/bg.jpg);">
		<view class="pl40 pr40">
			<u-tabs :list="menu" :current="current" lineColor='#000'
				activeStyle='color:#000;font-weight:bold;font-size: 36rpx;' @change="setMenu"></u-tabs>
			<!-- <u-tabs :list="menu" :current="current" lineColor='#000'
				activeStyle='color:#000;font-weight:bold;font-size: 36rpx;' @change="setMenu"></u-tabs> -->
		</view>
		<view class="mt40" v-if="current == 0">
			<view class="list mt20 p20" v-if="list.length > 0">
				<view class="item br12 p20 bg-white mb20" v-for="(item, index) in list" :key="index">
					<view class="top mb20" :class="item.show ? 'line pb20' : ''">
						<view class="sub f28">{{ item.time }} 应发工资</view>
						<view class="d-b-c mt10">
							<view class="f40 money ">{{ item.total_salary }}<text class="f28">元</text> </view>
							<view @click="setShow(index)" class="d-c-c f24 p10 sub more" :class="item.show ? 'show' : ''">
								<view class="iconfont icon-xiala1"></view> {{ item.show ? '收起' : '查看详细' }}
							</view>
						</view>
					</view>
					<view class="content d-b-c f28 " :style="[{ maxHeight: item.show ? '999px' : '0px' }]">
						<view class="i1 flex-1 mr30 pr30">
							<view class="d-b-c mb20">
								<text class="sub name">基本工资</text><text>{{ item.basic_salary }}元</text>
							</view>
							<view class="d-b-c mb20">
								<text class="sub name">加班工资</text><text>{{ item.overtime_salary }}元</text>
							</view>
							<view class="d-b-c">
								<text class="sub name">社保</text><text>{{ item.social_security }}元</text>
							</view>
						</view>
						<view class="i1 flex-1">
							<view class="d-b-c mb20">
								<text class="sub name">全勤</text><text>{{ item.present }}元</text>
							</view>
							<view class="d-b-c mb20">
								<text class="sub name">津贴</text><text>{{ item.allowance }}元</text>
							</view>
							<view class="d-b-c red">
								<text class="fb name">销售奖金</text><text>{{ item.bonus }}元</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-empty v-else mode="list" marginTop="20vh" text="暂无列表"></u-empty>
		</view>
		<view class="pos br-50 p10" @click="store.commit('jump', '/pages/wipe/add')">
			<u-icon name="plus" bold size='20' color='#fff'></u-icon>
		</view>
		<tab-bar :tipNumber="2"></tab-bar>
	</view>
</template>
<script>
import { BASE_IMG_URL } from '@/api/http.js'
import tabBar from '@/components/tabbar/tabbar'
import {
	netBriefingData,
	netAchievedata,
	netIndexRankingdata,
	netJurisdiction,
	netFinanceData,
	netAfterData,
	netAfterAchieve
} from '@/api/api.js'

import { netNowageList } from '@/api/api.js'
export default {
	components: {
		tabBar,
	},
	data() {
		return {
			list: [{
				moon: '8月',
				all: '6900',
				jb: '6200',
				jb1: '500',
				sb: '-500',
				qq: "100",
				js: "100",
				xs: "500",
				show: false
			}, {
				moon: '8月',
				all: '6900',
				jb: '6200',
				jb1: '500',
				sb: '-500',
				qq: "100",
				js: "100",
				xs: "500",
				show: false
			}, {
				moon: '8月',
				all: '6900',
				jb: '6200',
				jb1: '500',
				sb: '-500',
				qq: "100",
				js: "100",
				xs: "500",
				show: false
			}, {
				moon: '8月',
				all: '6900',
				jb: '6200',
				jb1: '500',
				sb: '-500',
				qq: "100",
				js: "100",
				xs: "500",
				show: false
			}],
			page: 1,
			limit: 10,
			totalPage: 1,
			menu: [{
				name: "工资单内容"
			}],
			current: 0,

			mIndex: 0,
			status: [{
				name: "待处理"
			}, {
				name: "已处理"
			}],
			sIndex: 0
		}
	},
	onShow() {
		this.page = 1
		this.list = []
		this.getList()
	},
	onReachBottom() {
		if (this.page >= this.totalPage) {
			return
		}
		this.page++
		this.getList()
	},
	methods: {
		getList() {
			let params = {
				page: this.page,
				limit: this.limit
			}
			netNowageList(params).then(res => {
				this.list = this.list.concat(res.data.data)
				this.totalPage = res.data.last_page
			})
		},
		setMindex(i) {
			this.mIndex = i
		},

		setsIndex(e) {
			this.sIndex = e.index
		},

		setMenu(e) {
			this.current = e.index
		},

		setShow(i) {
			this.list[i].show = !this.list[i].show
		},
	}
}
</script>

<style scoped lang="scss">
.list {
	.money {
		color: #4285DC;
	}

	.i1 {
		&:nth-child(1) {
			border-right: 1px solid #eee;
		}

		.name {
			position: relative;
			width: 4em;

			&:before {
				content: "";
				position: absolute;
				border-bottom: 1px dashed #eee;
				width: 80rpx;
				left: 110%;
				bottom: 40%;
				transform: translateY(-50%);
				height: 1px;
			}
		}
	}

	.more {
		background-color: #F2F2F4;
	}

	.content {
		overflow: hidden;
		transition: 0.5s;
	}

	.more.show {
		.iconfont {
			transform: rotate(180deg);
			transition: 0.5s;
		}
	}

	.left {
		background-color: #f3f3f3;

		.iconfont {
			color: #ff8d22;
		}
	}
}

.menu {
	.item {
		image {
			width: 48rpx;
			height: 48rpx;
			margin: 0 auto;
			display: block;
		}
	}

	.active {
		background-color: #009dfd;
		box-shadow: 0rpx 2rpx 16rpx 0rpx rgba(13, 77, 117, 0.66);
	}
}

.body {
	position: relative;

	.pos {
		position: fixed;
		background-color: #009dfe;
		right: 40rpx;
		bottom: 40rpx;
	}
}
</style>